<template>
  <div style="position: relative; width: 100%; height: 100%">
    <div
      style="
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        height: 6%;
        background-color: rgb(123, 232, 123);
      "
    >
      <div class="price-box">
        <div>树木数:</div>
        <div>{{ jiazhi.tree }}</div>
      </div>
      <div class="price-box">
        <div>煤炭数:</div>
        <div>{{ jiazhi.coal }}</div>
      </div>
      <div class="price-box">
        <div>成包煤炭数:</div>
        <div>{{ jiazhi.coalpackage }}</div>
      </div>
      <div class="price-box">
        <div>经济:</div>
        <div>{{ jiazhi.money }}</div>
      </div>
    </div>
    <div id="tree1" @mousedown="mousedown" style="position: absolute; top: 15%; left: 5%">
      <Tree :treeNum="jiazhi.tree" @getData="getTreeNum"></Tree>
    </div>
    <div id="coal1" @mousedown="mousedown" style="position: absolute; top: 15%; left: 15%">
      <Coal :treeNum="jiazhi.tree" :coalNum="jiazhi.coal" @getData="getCoalNum"></Coal>
    </div>
    <div id="factory1" @mousedown="mousedown" style="position: absolute; top: 15%; left: 25%">
      <Factory :coalNum="jiazhi.coal" @getData="getFacNum"></Factory>
    </div>
    <div id="market1" @mousedown="mousedown" style="position: absolute; top: 15%; left: 35%">
      <Market @getData="getMonNum"></Market>
    </div>
  </div>
</template>
  
  <script>
import Tree from "@/components/mid-zhandian/tree.vue";
import Coal from "@/components/mid-zhandian/coal.vue";
import Factory from "@/components/mid-zhandian/factory.vue";
import Market from "@/components/mid-zhandian/market.vue";

export default {
  name: "index-",
  components: {
    Tree,
    Coal,
    Factory,
    Market,
  },
  data() {
    return {
      jiazhi: {
        tree: 0,
        coal: 0,
        coalpackage: 0,
        money: 0,
      },
    };
  },
  mounted() {},
  methods: {
    getTreeNum(data) {
      this.jiazhi.tree = data;
    },
    getCoalNum(data) {
      this.jiazhi.tree -= 5;
      this.jiazhi.coal = data;
    },
    getFacNum(data) {
      this.jiazhi.coal -= 10;
      this.jiazhi.coalpackage = data;
    },
    getMonNum(data) {
      this.jiazhi.money = data;
    },
     /* 鼠标按下 */
     mousedown(event) {
      console.log(event);
      return
      // 1,计算位置差
      // 因为clientX和offsetLeft的属性返回的位置不一样 要相减得到鼠标在拖动元素内实际点击的位置
      // 后面每一次拖动时都要减去这个差值 否则就会造成你拖动的位置一直都是元素的左上角 而不是你之前点击的位置
      // this.disX = event.clientX - this.DragEl.offsetLeft;
      // this.disY = event.clientY - this.DragEl.offsetTop;

      // //2， 获取拖动元素的高度和容器的高度 为了下面进行限制元素拖动的范围
      // let dragHeight = this.DragEl.offsetHeight;
      // let dragWidth = this.DragEl.offsetWidth;
      // let dragContainerWidth = this.dragContainerEl.offsetWidth; //获取容器的高度和宽度
      // let dragContainerHeight = this.dragContainerEl.offsetHeight;

      // // 添加鼠标移动事件
      // document.onmousemove = (el) => {
      //   // 3，获取鼠标移动位置
      //   let moveX = el.clientX - this.disX;
      //   let moveY = el.clientY - this.disY;

      //   // 左边界
      //   if (moveX <= 0) {
      //     moveX = 0;
      //   }
      //   // 上边界
      //   if (moveY <= 0) {
      //     moveY = 0;
      //   }
      //   //下边界  容器高度 - 拖动元素高度
      //   if (moveY >= dragContainerHeight - dragHeight) {
      //     moveY = dragContainerHeight - dragHeight;
      //   }
      //   //右边界   容器宽度 - 拖动元素宽度
      //   if (moveX >= dragContainerWidth - dragWidth) {
      //     moveX = dragContainerWidth - dragWidth;
      //   }

      //   this.DragEl.style.left = moveX + "px";
      //   this.DragEl.style.top = moveY + "px";
      // };
      // document.onmouseup = () => {
      //   document.onmousemove = null;
      // };
    }
  },
};
</script>
  
  <style scoped>
.price-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10%;
}

.price-box div:nth-child(1) {
  margin-right: 10px;
}

.jindutiao5 {
  width: 100px;
  height: 20px;
  border-radius: 10px;
  border: 2px solid #000;
}
</style>